提到過不少次響應式網頁，這裡展示簡單的響應式網頁是什麼效果
在非響應式的情況下，當視窗縮小時物件不會跟著移動，導致消失，這就是絕對單位會有的問題

div{
    width: 840px;
    height: auto;
    background-color: aqua;
    text-align: right;
        }

將width改成100%或100vw等相對單位後即便視窗縮小也沒有問題

還有一個東西可以用作響應式網頁，@media媒體查詢
透過@media(max-width: 600px){}可以進行判斷，當視窗寬度到600px的時候就會執行{}裡的內容，透過這個可以改變物件的單位或顯示方式，就算是用px也能做到響應式

@media (max-width: 600px){
div{
        width: 400px;
        background-color: violet;
   }
        }
@media (max-width:400px) {
div{
    width: 200px;
    background-color: pink;
}
        }

全螢幕的時候，都沒達到條件所以，正常顯示

現在視窗大小達到了@media (max-width: 600px)的條件，所以div的寬度變成400px，背景色變成紫羅蘭色

將視窗縮到達成@media (max-width:400px)的條件，div的寬度變成200px，背景色再變為粉色

不過media要注意順序，當複數media能夠觸發時會以後者優先，將@media (max-width:400px)與@media (max-width: 600px)對調排序看看

@media (max-width:400px)
{
    div{
        width: 200px;
        background-color: pink;
        }
}
@media(max-width: 600px)
{
    div{width: 400px;
        background-color:violet;
    }
}

對調後即便達到了@media(max-width:400px)的條件還是顯示@media(max-width:600px)